refactor(components): rewrite Spinner component

* Message should be set as children
* Default message is no longer available (depending on use case, the
consumer might prefer aria-label instead)
* It is now possible to define the message position

1 files changed, 6 insertions, 1 deletions

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 3e4c38f..523e21d 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -71,8 +71,13 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
   const { website } = useSettings();
   const prismPlugins: OptionalPrismPlugin[] = ['command-line', 'line-numbers'];
   const { attributes, className } = usePrism({ plugins: prismPlugins });
+  const loadingArticle = intl.formatMessage({
+    defaultMessage: 'Loading the requested article...',
+    description: 'ArticlePage: loading article message',
+    id: '4iYISO',
+  });
 
-  if (isFallback || !article) return <Spinner />;
+  if (isFallback || !article) return <Spinner>{loadingArticle}</Spinner>;
 
   const { content, id, intro, meta, title } = article;
   const { author, commentsCount, cover, dates, seo, thematics, topics } = meta;